<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>async&await</title>
</head>
<body>
<script>
    /*
    * ES7 async&await
    *
    * async
    *   可以作用在任何方法前, 返回值是一个Promise对象(回调函数也可以使用async)
    *   函数内部return的返回值, 会成为then回调函数的参数
    *   async作用的方法,如果内部出现报错,可以被promise的catch方法捕获
    *   常规使用,一般都会通过try catch进行有可能报错的代码处理
    *
    * await
    *   await只能作用在async修饰的方法中,不能单独使用,如果使用报错:await is only valid in async functions and the top level bodies of modules
    *   await是会阻塞代码执行
    *   正常情况 await后面跟着一个Promise对象; 返回的是Promise对象的成功后结果; 如果是一个普通值,那么会直接返回这个值
    *   reject的返回 await没有办法进行捕获(使用try catch进行捕获)
    *
    * async&await是Promise和Generator的语法糖
    * */

    //可以作用在任何方法前, 返回值是一个Promise对象
    // let fn1 = function (){
        // return
    // }
    let arr = [1,2,3,4,5,6];

    console.time("arrFor");
    for (let i=0;i<arr.length;i++){

    }
    console.timeEnd("arrFor");
    console.time("arrForEach");
    arr.forEach(async (item)=>{})
    console.timeEnd("arrForEach");



    let fn1 = async ()=>{
        // return
    }
    console.log(fn1());//undefined //使用async之后返回Promise对象


    //函数内部return的返回值, 会成为then回调函数的参数
    let fn2 = async ()=>{
        return 1
    }
    // console.log(fn2());//使用async之后返回Promise对象
    fn2().then(res=>{
        console.log("fn2.then==>",res)
    })


    // let p1 = new Promise((resolve, reject)=>{
    //     throw new Error("=报错")
    // })
    // p1.then(res=>{}).catch(err=>{
    //     console.log(err)
    // })


    // JS中的错误捕获
    try {//常规有可能报错的代码
        const a = "123";
        a = 123
    }catch (e){//错误捕获,会默认带一个err的参数
        console.log("try=>catch=>",e)
    }finally {//无论如何都会执行finally
        console.log("try=>finally=>")
    }


    // let fn3 = async ()=>{
    //     const a = "123";
    //     a = 123
    //     return 1
    // }
    // fn3().then(res=>{
    //     console.log("fn3.then==>",res)
    // }).catch(err=>{
    //     console.log("fn3.err==>",err)
    // })


    let fn3 = async ()=>{
        try{
            const a = "123";
            a = 123
            return 1
        }catch(err){
            console.log("fn3.err==>",err);
            return 2
        }
    }
    fn3().then(res=>{
        console.log("fn3.then==>",res)
    })


    {//promise
        let p1 = ()=>{
            return new Promise((resolve, reject)=>{
                resolve("hello world");
            })
        }
        function fn(){
            p1().then((res)=>{
                console.log("step1_1==>",res);
            })
            console.log("step1_2")
        }
        fn();
        //step1_2
        //step1_1 hello world
    }
    {
        let p1 = ()=>{
            // return Promise.resolve("hello world")
            return Promise.reject("hello world")
        }
        async function fn1(){
            //使用await之后 像是在写同步代码一样
            //await是会阻塞代码执行
            try{
                let res = await p1();
                console.log("step2_1",res);
                console.log("step2_2")
            }catch (err){
                console.log("step2_err==>",err)
            }
        }
        fn1();
        //step2_1 hello world
        //step2_2
    }


    {
        let p1 = ()=>{
            return new Promise((resolve, reject)=>{
                setTimeout(()=>{
                    resolve("hello world")
                },3000)
            })
        }
        async function fn3(){
            console.time("step3_1");
            let res = await p1();
            console.timeEnd("step3_1");
        }
        fn3();
    }


</script>
</body>
</html>